<template>
  <div>
    <el-row class='header flex-row' style='background: #fff;padding: 15px'>
      <div class="item flex-row">
        <span :class="{'cur':params.selectStatus ==1}" @click="cheackTableType(1)">菜单商品({{tableData.adequateTotal||'0'}})</span>
        <span :class="{'cur':params.selectStatus ==2}"
              @click="cheackTableType(2)">库存不足({{tableData.shortTotal||'0'}})</span>
        <span :class="{'cur':params.selectStatus ==3}"
              @click="cheackTableType(3)">已下架({{tableData.dropOffTotal||'0'}})</span>
        <span :class="{'cur':params.selectStatus ==4}" @click="cheackTableType(4)">价格异常({{tableData.abnormalTotal||'0'}})</span>
        <span :class="{'cur':params.selectStatus ==5}"
              @click="cheackTableType(5)">回收站({{tableData.deleteTotal||'0'}})</span>
      </div>
      <el-input style="width: 240px;" placeholder="请输入内容" v-model="params.name" class="input-with-select"
                size="small" clearable>
        <el-button slot="append" icon="el-icon-search" @click="getTableList()"></el-button>
      </el-input>
      <el-dropdown placement="bottom-start" trigger="click" @visible-change="batchOperation">
        <el-button type="danger" size="small" style="margin:0 5px;">
          批量操作<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" style="padding:  10px;">
          <el-button style="margin: 0" @click="modifyTheProperties()">属性</el-button>
          <el-button style="margin: 0" @click="modifySpecifications()">规格</el-button>
          <el-button style="margin: 0" @click="mealsFee()">餐盒费</el-button>
          <el-button style="margin: 0" @click="standUpAndDown(2,0)">上架</el-button>
          <el-button style="margin: 0" @click="standUpAndDown(2,2)">下架</el-button>
          <el-button style="margin: 0" @click="classificationOfGoods()">商品分类</el-button>
          <el-button style="margin: 0" @click="setTheInventory(2,1)">沽清</el-button>
          <el-button style="margin: 0" @click="setTheInventory(2,2)">置满</el-button>
          <el-button style="margin: 0" type="danger" plain @click="deleteTheGoods(2)">删除</el-button>
        </el-dropdown-menu>
      </el-dropdown>
      <!--<el-button style="margin-left: 10px" size="small" @click="batchOperation()">批量操作选中</el-button>-->
      <el-button type="primary" plain icon="el-icon-plus" @click="openAddClassName(1)" size="small">新增分类</el-button>
      <el-button style='margin-left: 5px' type="primary" plain icon="el-icon-plus" size="small"
                 @click="toAddcom()">新增商品</el-button>
    </el-row>
    <div class="flex wrap">
      <div class="menu">
        <ul>
          <draggable v-model="tableData.list" :options="{group:'people'}" @end="dropMemu">
            <li class="flex-row" v-for="(list,index) in tableData.list" :key="list.id"
                @click="switchClassification(index)" :class="{'cur':actIndex ==index}">
              <span class="title text-over">{{list.name}}</span><span class="num">{{list.num}}</span>
            </li>
          </draggable>
        </ul>
      </div>
      <div class="table-diy">
        <div class="shop-l flex-row">
          <span v-if="classId">{{className}}</span>
          <el-button v-if="classId" icon="el-icon-edit" type="primary" plain @click="openAddClassName(2)" size="mini">编辑
          </el-button>
          <el-button v-if="classId" icon="el-icon-delete" type="primary" @click="deleteClass()" size="mini">删除</el-button>
          <div style=" margin-left: 50px; background: #fff;">
            排序帮助
            <el-tooltip class="item" effect="dark" content="拖动菜单列表或者商品列表，可改变模块排序" placement="top-start">
              <el-button icon="el-icon-question" type="text"></el-button>
            </el-tooltip>
          </div>
        </div>
        <div class="base-table-wrap more-d">
          <el-row type="flex" justify="space-between" class="head">
            <el-col :span="5" style="padding-left: 20px">
              <el-checkbox :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
              <span style="margin-left: 15px">商品信息</span>
            </el-col>
            <el-col :span="14">
              <el-row>
                <el-col :span="4" style="text-align: center">规格</el-col>
                <el-col :span="4" style="text-align: center">价格</el-col>
                <el-col :span="4" style="text-align: center">餐盒费</el-col>
                <el-col :span="8" style="text-align: center">库存</el-col>
                <el-col :span="4" style="text-align: center">月销</el-col>
              </el-row>
            </el-col>
            <el-col :span="5" style="text-align: center">操作</el-col>
          </el-row>
          <el-checkbox-group style="width: 100%" v-model="multipleSelection" @change="handleCheckedCitiesChange">
            <draggable style="width: 100%" v-model="actIndexData" :options="{group:'commodity'}" @end="dropCommodity">
              <el-row class="t-tr" type="flex" align="middle" justify="space-between"
                      v-for="list1 in actIndexData" :key="list1.id">
                <el-col :span="5" class="td1" type="flex" style="padding-left: 20px">
                  <el-checkbox :label="list1.id" :key="list1.id" class="box">
                    <div class="flex" style="margin-left: 15px">
                      <div class="bus-img"><img :src="'http://image.jiaowawang.cn/'+list1.imgpath"/></div>
                      <div class="name">
                        {{list1.name}}
                         <span style='color:red' v-if="list1.required">【必点】</span>
                      </div>
                    </div>
                  </el-checkbox>
                </el-col>
                <el-col :span="14">
                  <el-row style="margin: 5px 0" type="flex" align="middle"
                          v-for="slist in list1.standardList" :key="slist.id">
                    <el-col :span="4" style="text-align: center">{{slist.name}}</el-col>
                    <el-col :span="4" style="text-align: center">{{slist.price}}</el-col>
                    <el-col :span="4" style="text-align: center">{{slist.packageFee}}</el-col>
                    <el-col :span="8" style="text-align: center" class="st4">
                      <div class="invy">{{slist.num}}/<span>10000</span></div>
                      <div class="flex-row-ver btns">
                        <el-button class="el-text-danger" type="text" :disabled="slist.num=='0'"
                                   @click="setTheInventory(1,1,slist.id)">沽清</el-button>
                        <el-button class="el-text-success" type="text" :disabled="slist.num=='10000'"
                                   @click="setTheInventory(1,2,slist.id)">置满</el-button>
                      </div>
                    </el-col>
                    <el-col :span="4" style="text-align: center">{{slist.saleNum||'0'}}</el-col>
                  </el-row>
                </el-col>
                <el-col :span="5" style="text-align: center">
                  <div v-if="list1.deleted!='1'">
                    <router-link :to="{path:'/main/comdty/addcom',query:{bid:$route.query.id,cid:list1.id}}">
                      <el-button class="el-text-check" style="width:60px;margin: 5px;" type="text" >编辑</el-button>
                    </router-link>
                    <el-button class="el-text-check"  type="text" style="width:40px;margin: 5px;" v-if="list1.status ==2"
                               @click="standUpAndDown(1,0,list1.id)">上架
                    </el-button>
                    <el-button class="el-text-check" type="text"  style="width:40px;margin: 5px;" v-if="list1.status ==0"
                               @click="standUpAndDown(1,2,list1.id)">下架
                    </el-button>
                    <el-button class="el-text-danger"  type="text"  style="width:40px;margin: 5px;"
                               @click="deleteTheGoods(1,list1.id)">删除</el-button>
                  </div>
                  <div v-else>
                    <el-button class="el-text-check" style="width:60px;margin: 5px;"  type="text" @click="recoveryTheGoods(list1.id)">恢复
                    </el-button>
                  </div>
                </el-col>
              </el-row>
            </draggable>
          </el-checkbox-group>
          <el-row v-if="actIndexData.length == 0"
                  style="position: relative;min-height: 60px;text-align: center;width: 100%;height: 100%;">
            <span style="position: absolute;eft: 50%; top: 50%;-webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);color: #909399;">当前菜单暂无商品</span>
          </el-row>
          <div class="base-directives-loading" v-show="isloadingTable">
            <div class="el-loading-spinner">
              <svg viewBox="25 25 50 50" class="circular">
                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="批量修改属性" v-dialogDrag :visible.sync="dialogTableVisible2" width="1200px"
               :close-on-click-modal="false">
      <el-form class="item" :model="params2" ref="ruleForm2" label-width="110px"  size="small">
        <div class="head flex-row">
          <span style="width: 140px">商品属性</span>
          <span class="t-sub flex-row">
            <span class="cont">标签(可填写2-6个)</span>
            <el-button class="el-text-danger" type="text" style="text-align: center;width: 100px;">删除</el-button>
          </span>
        </div>
        <el-row class="body1">
          <el-form-item label-width="0" required style="margin-bottom: 0" v-for="(item,index) in params2.optionList"
                        :key="index">
            <el-row type="flex" justify="space-between">
              <el-form-item style="width: 160px;" :prop="'optionList.' + index + '.name'"
                            :rules="[{required: true, message: '规格名称未填', trigger: 'blur'}]">
                <el-row type="flex">
                  <el-input v-model="item.name" placeholder="如:温度"></el-input>
                  <span style="margin:0 10px;">:</span>
                </el-row>
              </el-form-item>
              <el-form-item :prop="'optionList.' + index + '.sellSubOptionList'" label-width="0" style="width: 100%"
                            :rules="[{type:'array', validator:sellSubOptionList, trigger: 'change' }]">
                <el-row type="flex" justify="space-between">
                  <el-input v-for="(list,subIndex) in item.sellSubOptionList" :key="subIndex"
                            style="width: 140px;margin-bottom: 0" v-model="list.name" placeholder="如:去冰"></el-input>
                  <div class="del flex-row-ver" style="width: 100px;height: 40px;" @click="delitiveAttribute(index)">
                    <i class="el-icon-remove" style="font-size: 25px;color:#f56c6c;"></i>
                  </div>
                </el-row>
              </el-form-item>
            </el-row>
          </el-form-item>
          <el-button  class="el-text-success"  type="text" v-if="isShow2" @click="additiveAttribute()">添加属性(最多10个)</el-button>
        </el-row>
        <el-form-item>
          <el-button type="primary" :loading="issubmitLoading" @click="saveModifyTheProperties('ruleForm2')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="批量修改规格" v-dialogDrag :visible.sync="dialogTableVisible3" width="1200px"
               :close-on-click-modal="false">
      <el-form :model="params3" ref="ruleForm3" label-width="110px" class="item" size="small">
        <div class="head flex-row">
          <span style="width: 110px">商品规格</span>
          <span class="s-sub flex-row">
            <span style="width: 200px;">规格名称</span>
            <span style="width: 140px;">价格(元)</span>
            <span style="width: 140px;">餐盒费(元)</span>
            <span style="width: 140px;">库存(最大10000)</span>
            <span style="width: 140px;text-align: center;">开启次日置满
              <el-tooltip content="开启次日置满，则每晚过24:00自动库存回复未10000" placement="top-start">
                <el-button type="text" icon="el-icon-question"></el-button>
              </el-tooltip>
            </span>
            <span style="text-align: center;width: 100px;">删除</span>
          </span>
        </div>
        <el-row class="body1">
          <el-form-item style="margin-bottom: 0;" v-for="(item,index) in params3.standardList" :key="index" :label="'规格' + (index+1)" required >
            <el-row type="flex" justify="space-between">
              <el-form-item style="width: 200px;" :prop="'standardList.' + index + '.name'" :rules="[{required: true, message: '规格名称未填', trigger: 'blur'}]">
                <el-input v-model="item.name" placeholder="输入规格名称" clearable />
              </el-form-item>
              <el-form-item :prop="'standardList.' + index + '.price'" :rules="[{required: true, message: '规格价格未填'}]">
                <el-input-number v-model="item.price" :min='0' :max='9999' :precision='2' />
              </el-form-item>
              <el-form-item :prop="'standardList.' + index + '.packageFee'" :rules="[{required: true, message: '餐盒费未填'}]">
                <el-input-number v-model="item.packageFee" :min='0' :max='9999' :precision='2' />
              </el-form-item>
              <el-form-item :prop="'standardList.' +index + '.num'" :rules="[{required: true, message: '库存数量未填'}]">
                <el-input-number v-model="item.num" :min='0' :max='10000' :precision='0' />
              </el-form-item>
              <el-form-item style="text-align: center;width: 140px;">
                <el-switch v-model="item.fullNum" active-color="#409EFF" style="height: 40px; line-height: 32px" />
              </el-form-item>
              <div class="del flex-row-ver" style="width: 100px;height: 40px;" @click="delTheSpecification(index)">
                <i class="el-icon-remove" style="font-size: 25px;color:#f56c6c;" v-if="index != 0"></i>
              </div>
            </el-row>
          </el-form-item>
          <el-button class="el-text-success" type="text"  v-if="isShow1" @click="addTheSpecification()">添加规格(最多10个)
          </el-button>
        </el-row>
        <el-form-item>
          <el-button type="primary" :loading="issubmitLoading" @click="saveModifySpecifications('ruleForm3')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="批量修改餐盒费" v-dialogDrag :visible.sync="dialogTableVisible4" width="500px" :close-on-click-modal="false">
      <el-form :model="params4" ref="ruleForm4" label-width="80px" class="item" size="laege">
        <el-form-item label="餐盒费" prop="packageFee" :rules="[{required: true, message: '餐盒费未填'}]">
          <el-input-number style='margin-right: 10px' v-model="params4.packageFee" :min='0' :max='9999' :precision='2'/> 元
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="issubmitLoading" @click="saveMealsFee('ruleForm4')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="批量修改分类" v-dialogDrag :visible.sync="dialogTableVisible5" width="500px" :close-on-click-modal="false">
      <el-form :model="params5" ref="ruleForm5" label-width="110px" class="item" size="laege">
        <el-form-item label="商品分类" prop="selltypeid" :rules="[{required: true, message: '请选择商品分类', trigger: 'change'}]">
          <el-select v-model="params5.selltypeid" placeholder="请选择商品分类" clearable>
            <el-option v-for="item in classlist" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="issubmitLoading" @click="saveClassificationOfGoods('ruleForm5')">保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :title="addOrEdit+'分类'" v-dialogDrag :visible.sync="dialogTableVisible1" width="500px" :close-on-click-modal="false">
      <el-form :model="form1" ref="ruleForm1" label-width="100px" class="demo-ruleForm" size="laege">
        <el-form-item prop="name" label="分类名称" :rules="[{required: true, message: '小类名称不能为空', trigger: 'blur'}]">
          <el-input v-model="form1.name" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="issubmitLoading" @click="submitForm1('ruleForm1')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import draggable from 'vuedraggable'
  export default {
    components: { draggable },
    data() {
      return {
        addOrEdit: '添加', //添加 修改文本提示
        addOrEditType: 1, //添加或者修改状态
        className: '',                                   //当前默认商品名称
        classId: '',                                     //当前默认商品Id
        actIndex: 0,                                     //当前菜单点击序号
        actIndexData: [],                               //当前显示的商品
        isloadingTable: false,                          //表单等待
        dialogTableVisible1: false,                     //新增分类对话框
        dialogTableVisible2: false,                     //批量修改属性
        dialogTableVisible3: false,                     //批量修改规格
        dialogTableVisible4: false,                     //批量修改餐盒费
        dialogTableVisible5: false,                     //批量修改商品分类
        checkAll: false,                                 //全选状态
        indeterminate: false,                          //未知全选状态
        multipleSelection: [],                          //选择数
        params: {                                         //表格查询
          name: '',
          businessid: this.$route.query.id,
          selectStatus: 1,
        },
        isShow2: true, //控制添加属性按钮
        params2: {  //属性弹窗数据
          optionList: []
        },
        isShow1: true,   //控制添加规格按钮
        params3: {  //规格弹窗数据
          standardList: [{name: '', id: '', price: undefined, packageFee:undefined, num: undefined, fullNum: false}],
        },
        params4: {  //打包费
          packageFee:undefined,
        },
        classlist: [],  //分类数据
        params5: {  //分类
          selltypeid: null,
        },
        issubmitLoading: false,  //弹出内容保存等待
        form1: { //分类数据
          name: '',
          businessid: this.$route.query.id
        },
        tableData: {},
        className: '' //新增分类
      }
    },
    methods: {
      getTableList() { //获取页面信息
        this.isloadingTable = true
        this.checkAll = false //恢复默认选中状态
        this.issubmitLoading = false //恢复默认未知选中状态
        this.multipleSelection = []  //恢复默认选中数据
        const params = {...this.params }
        this.multipleSelection = [] //清空选择数据
        this.$http.get('/server/business/findByBusinessId?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
            const length = this.tableData.list.length
            if (length > 0) {
              if (length >= this.actIndex) {
                this.actIndexData = this.tableData.list[this.actIndex].goodsSells || []
              } else {
                this.actIndexData = this.tableData.list[0].goodsSells || []
              }
            }
            if (this.tableData.list.length > 0) {
              this.className = this.tableData.list.length > 0 ? this.tableData.list[0].name : ''
              this.classId = this.tableData.list.length > 0 ? this.tableData.list[0].id : null
            }
            this.actIndex = 0
          }
        }).finally(() => { this.isloadingTable = false })
      },
      cheackTableType(type) { //切换页面状态数据
        this.params.selectStatus = type
        this.getTableList()
      },
      modifyTheProperties() { //打开修改属性弹窗
        this.params2.optionList = [],
        this.dialogTableVisible2 = true
      },
      additiveAttribute() {  //添加属性
        this.params2.optionList.push({
          name: '',
          id: '',
          sellSubOptionList: [{name: '', id: ''}, {name: '', id: ''}, {name: '', id: ''}, {name: '', id: ''}, {
            name: '',
            id: ''
          }, {name: '', id: ''}]
        })
        if (this.params2.optionList.length >= 10) this.isShow2 = false
      },
      delTheSpecification(index) { //删除规格
        this.params2.standardList.splice(index, 1)
        this.isShow1 = true
      },
      deleteClass() { //删除分类
        if (this.classId) {
          let params = {id: this.classId}
          this.issubmitLoading = false
          this.$http.get('/server/goodsSellType/delete?' + this.qs.stringify(params)).then(res => {
            if (res.data.success) {
              this.$message({type: 'success', message: '删除成功!'})
              this.getTableList()
            }
          }).finally(() => { this.issubmitLoading = false })
        } else {
          this.$message.error('请选择分类')
        }
      },
      sellSubOptionList(rule, value, callback) {//商品属性至少2个
        let count = null;
        value.forEach((item, index) => {
          if (item.name) count += 1
        })
        if (count < 2) {
          callback(new Error('至少填写两个属性标签'));
        } else {
          callback();
        }
      },
      saveModifyTheProperties(formName) { //保存修改属性
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {...this.params2 }
            params.optionList.forEach((item, index) => {
              const arr = []
              item.sellSubOptionList.forEach((list, sindex) => {
                if (list.name) {
                  arr.push(list)
                }
              })
              params.optionList[index].sellSubOptionList = arr
            })
            params.ids = this.multipleSelection
            this.issubmitLoading = true
            this.$http.post('/server/goodsSell/batchOperating', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '修改成功!'})
                this.dialogTableVisible2 = false
                this.getTableList()
              }
            }).finally(() => { this.issubmitLoading = false })
          } else {
            this.$message.error('有不合法的输入，请检查页面修改再提交')
            return false
          }
        })
      },
      modifySpecifications() { //打开修改规格
        this.params3.standardList = [{name: '', id: '', price: undefined, packageFee: undefined, num: undefined, fullNum: false}],
        this.dialogTableVisible3 = true
      },
      addTheSpecification() { //添加规格
        this.params3.standardList.push({name: '', id: '', price: undefined, packageFee: undefined, num: undefined, fullNum: false})
        if (this.params3.standardList.length >= 10) this.isShow1 = false
      },
      delTheSpecification(index) { //删除规格
        this.params3.standardList.splice(index, 1)
        this.isShow1 = true
      },
      saveModifySpecifications(formName) { //保存修改规格
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params3 }
            params.ids = this.multipleSelection
            this.issubmitLoading = true
            this.$http.post('/server/goodsSell/batchOperating', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '修改成功!'})
                this.dialogTableVisible3 = false
                this.getTableList()
              }
            }).finally(() => { this.issubmitLoading = false })
          }
        })
      },
      mealsFee() { //打开修改餐盒费
        this.params4.packageFee = ''
        this.dialogTableVisible4 = true
      },
      saveMealsFee(formName) { //保存修改餐盒费
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params4 }
            params.ids = this.multipleSelection
            this.issubmitLoading = true
            this.$http.post('/server/goodsSell/batchOperating', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '修改成功!'})
                this.dialogTableVisible4 = false
                this.getTableList()
              }
            }).finally(() => { this.issubmitLoading = false })
          }
        })
      },
      obtainCommodityClassification() { //获取商品分类数据
        const params = {businessId: this.$route.query.id}
        this.$http.get('/server/goodsSellType/select?' + this.qs.stringify(params), {headers: {isCancel: true}}).then(res => {
          if (res.data.success) {
            this.classlist = res.data.data
          }
        })
      },
      classificationOfGoods() {  //打开商品分类
        this.params5.selltypeid = ''
        this.dialogTableVisible5 = true
      },
      saveClassificationOfGoods(formName) { //保存商品分类
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params5 }
            params.ids = this.multipleSelection
            this.issubmitLoading = true
            this.$http.post('/server/goodsSell/batchOperating', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '添加成功!'})
                this.dialogTableVisible5 = false
                this.getTableList()
              }
            }).finally(() => { this.issubmitLoading = false })
          }
        })
      },
      dropMemu() {  //拖动分类
        let arr = []
        this.tableData.list.forEach((item, index) => {
          arr.push(item.id)
        })
        let params = {
          ids: arr,
          id: this.$route.query.id
        }
        this.$http.post('/server/goodsSellType/dragSort', JSON.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '修改成功!'})
          } else {
            this.getTableList()
          }
        }).catch(err => { this.getTableList() })
      },
      dropCommodity() { //拖动商品
        const arr = []
        this.actIndexData.forEach((item, index) => {
          arr.push(item.id)
        })
        let params = {
          ids: arr,
          businessid: this.$route.query.id
        }
        this.$http.post('/server/goodsSell/dragSort', JSON.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '修改成功!'})
          } else {
            this.getTableList()
          }
        }).catch(() => { this.getTableList() })
      },
      openAddClassName(type) { //打开新增分类名称
        if (type == 1) {
          this.form1.name = ''
          this.addOrEdit = '添加'
          this.addOrEditType = 1
          this.dialogTableVisible1 = true
        } else {
          this.form1.name = this.className
          this.addOrEdit = '修改'
          this.addOrEditType = 2
          this.dialogTableVisible1 = true
        }
      },
      submitForm1(formName) { //保存 或修改分类
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.form1 }
            this.issubmitLoading = true
            if (this.addOrEditType == 1) {
              this.$http.post('/server/goodsSellType/save', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.$message({type: 'success', message: '添加成功!'})
                  this.dialogTableVisible1 = false
                  this.getTableList()
                }
              }).finally(() => { this.issubmitLoading = false })
            } else {
              params.id = this.classId
              this.$http.post('/server/goodsSellType/update', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.$message({type: 'success', message: '修改成功!'})
                  this.dialogTableVisible1 = false
                  this.getTableList()
                }
              }).finally(() => { this.issubmitLoading = false })
            }
          }
        })
      },
      handleCheckAllChange(val) {  //全选商品
        const getAllId = (arr) => {
          let obj = []
          arr.forEach((item, index) => {
            obj.push(item.id)
          })
          return obj
        }
        this.multipleSelection = val ? getAllId(this.tableData.list[this.actIndex].goodsSells) : []
        this.indeterminate = false
      },
      handleCheckedCitiesChange(val) {
        let checkedCount = val.length
        this.checkAll = checkedCount === this.tableData.list[this.actIndex].goodsSells.length
        this.indeterminate = checkedCount > 0 && checkedCount < this.tableData.list[this.actIndex].goodsSells.length
      },
      batchOperation(val) { //打开批量操作
        if (val) {
          if (this.multipleSelection.length == 0) {
            this.$message.error('请勾选需要操作的商品,再操作此项')
            return false
          }
        }
      },
      standUpAndDown(type, status, ids) {  //上下架
        let params = null
        if (type == 1) {
          params = {ids: [ids], status}
        } else if (type == 2) {
          params = {ids: this.multipleSelection, status}
        }
        this.$http.post('/server/goodsSell/setStatus', JSON.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '修改成功!'})
            this.getTableList()
          }
        })
      },
      setTheInventory(type, setNumType, id) { //库存数量管理
        let params = null;
        if (type == 1) {
          params = {id, setNumType}
        } else if (type == 2) {
          params = {ids: this.multipleSelection, setNumType}
        }
        this.$http.post('/server/goodsSellStandard/setNum', JSON.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '修改成功!'})
            this.getTableList()
          }
        })
      },
      recoveryTheGoods(ids){
        let params = { ids: [ids] }
        this.isloadingTable = true
        this.$http.post('/server/goodsSell/recovery', JSON.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '恢复成功!'})
            this.getTableList()
          }
        }).finally(() => { this.isloadingTable = false })
      },
      toAddcom() { // 新增商品
        if (this.tableData.list && this.tableData.list.length) {
          this.$router.push({ path: '/main/comdty/addcom', query: { bid: this.$route.query.id }})
        } else {
          this.$message.error('请先添加商品分类')
        }
      },
      deleteTheGoods(type, ids) {  //删除商品
        this.$confirm('是否确认删除商品?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          let params = null
          if (type == 1) {
            params = {ids: [ids]}
          } else if (type == 2) {
            params = {ids: this.multipleSelection}
          }
          this.isloadingTable = true
          this.$http.post('/server/goodsSell/delete', JSON.stringify(params)).then(res => {
            if (res.data.success) {
              this.$message({type: 'success', message: '删除成功!'})
              this.getTableList()
            }
          }).finally(() => { this.isloadingTable = false })
        })
      },
      switchClassification(index) {  //切换分类
        if (index == this.actIndex) return false
        this.multipleSelection = []
        this.checkAll = false
        this.indeterminate = false
        this.actIndexData = this.tableData.list[index].goodsSells || []
        this.actIndex = index
        this.className = this.tableData.list[index].name
        this.classId = this.tableData.list[index].id
      }
    },
    mounted() {
      if (this.$route.query.id) {
        this.obtainCommodityClassification()
        this.getTableList()
      } else {
        this.$message({type: 'error', message: '当前页面参数丢失，已返回列表页'})
        this.$router.push({path: '/main/comdty/index'})
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import './css/check.scss';
</style>
